<template>
<div class="box-banner">
    <div class="body-1 padding-39">
        <div class="top-title">
            <div class="title-left">监督举报平台背景图片：</div>
            <div class="title-right">
                <el-tooltip class="item" effect="light" content="图片大小为1920*272px" placement="top">
                    <el-button>?</el-button>
                </el-tooltip>
                <span class="text">图片说明</span>
                <el-row>
                    <!--<el-button type="edit">编辑</el-button >  :on-change="handleChange"-->
                    <el-upload class="upload-demo" action="#" :http-request="httpRequest" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :file-list="fileList1" :show-file-list="false" :on-change="handleChange">
                        <el-button size="small" type="primary" v-if="_SHOWBTN('wzgl-jdjb-wsjb-bjt')">编辑</el-button>
                    </el-upload>
                </el-row>
            </div>
        </div>
        <div class="banner-supervise">
            <img :src="baseUrl+platformBgpic" alt />
        </div>
    </div>
    <div class="body-1 mt-39">
        <div class="top-title">
            <div class="title-left">在线举报平台背景图:</div>
            <div class="title-right">
                <el-tooltip class="item" effect="light" content="图片大小为920*460px" placement="top-start">
                    <el-button>?</el-button>
                </el-tooltip>
                <span class="text">图片说明</span>
                <el-row>
                    <el-upload class="upload-demo" action="#" :http-request="httpRequest" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :file-list="fileList2" :show-file-list="false" :on-change="handleChange2">
                        <el-button size="small" type="primary" v-if="_SHOWBTN('wzgl-jdjb-wsjb-bjt')">编辑</el-button>
                    </el-upload>
                </el-row>
            </div>
        </div>
        <div class="banner-supervise-two">
            <img :src="baseUrl+onlneBgpic" alt />
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            fileList1: [],
            picSpace1: "",
            fileList2: [],
            picSpace2: "",
            Picbox: {
                platformBgpic: "",
                onlneBgpic: "",
                note: "",
            },
            note: "",
            platformBgpic: "",
            onlneBgpic: "",
        };
    },
    created() {
        this.getReportAll();
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    methods: {
        httpRequest() {
            return;
        },
        getReportAll() {
            this.Api.getReportAll().then((res) => {
                this.Picbox = res.data;
                this.$set(this.Picbox, "note", res.data.note);
                // console.log(this.Picbox, "获取");
                // console.log(this.Picbox.note,"举报须知")
                // console.log(this.note, "举报须知");
                // if (res.data.note == null) {
                //   // this.note = res.data.note;
                //   this.note = "";
                // } else {
                //   // this.note = " ";
                //   this.note = res.data.note;
                // }

                this.platformBgpic = res.data.platformBgpic;
                this.onlneBgpic = res.data.onlneBgpic;
                // console.log(this.note, "举报须知");
            });
        },
        //图片上传的方法
        handleChange(file, fileList) {
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                // console.log(file, fileList);
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData,111)
                this.Api.uploadImage(formData).then((res) => {
                    // var data = { ...this.ruleForm, picUrl: res.data.url };
                    // console.log(data, 111);
                    // this.$emit("update:ruleForm", data);
                    // console.log(res, "图片上传成功");
                    // this.picSpace1 = res.data.url;
                    this.$set(this.Picbox, "platformBgpic", res.data.url);
                    this.platformBgpic = res.data.url;
                    if (res.code === "0") {
                        // console.log((this.fileList1 = []), "清空钱");

                        // console.log(111111111111)
                        this.fileList1 = [];
                        // console.log((this.fileList1 = []), "清空后");
                        // console.log(this.platformBgpic, "图片监督举报");
                        this.Api.buildPic({
                            note: this.note,
                            onlneBgpic: this.onlneBgpic,
                            platformBgpic: this.platformBgpic,
                        }).then((res) => {
                            // console.log(this.note);
                            // console.log(res, "图片1接口");
                        });
                    }
                });
            }

        },
        //图片上传的方法
        handleChange2(file, fileList) {
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                // console.log(file, fileList, 1111);
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData,111)
                this.Api.uploadImage(formData).then((res) => {
                    // var data = { ...this.ruleForm, picUrl: res.data.url };
                    // console.log(data, 111);
                    // this.$emit("update:ruleForm", data);
                    // console.log(res, "图片上传成功");
                    // this.picSpace2 = res.data.url;
                    this.$set(this.Picbox, "onlneBgpic", res.data.url);
                    this.onlneBgpic = res.data.url;
                    if (res.code === "0") {
                        // console.log("图片接口是否调用");
                        this.fileList2 = [];
                        this.Api.buildPic({
                            note: this.note,
                            onlneBgpic: this.onlneBgpic,
                            platformBgpic: this.platformBgpic,
                        }).then((res) => {
                            // console.log(this.note);
                            // console.log(res, "图片保存");
                        });
                    }
                });
            }

        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-button--edit {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    color: white;
    padding: 0;
}

img {
    width: 1499px;
    height: 213px;
}

.box-banner {
    padding-left: 20px;
    padding-bottom: 20px;

    .padding-39 {
        padding-bottom: 39px;
        border-bottom: 1px solid #dddddd;
        margin-top: 19px;
    }

    .body-1 {
        .top-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 19px;

            .title-left {
                font-size: 20px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 22px;
            }

            .title-right {
                display: flex;
                align-items: center;

                /deep/.el-button--default {
                    width: 15px;
                    height: 15px;
                    color: rgba(153, 153, 153, 1);
                    border-radius: 50%;
                    padding: 0;
                    margin: 0;
                    margin-right: 7px;
                }

                .text {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                    line-height: 20px;
                    margin-right: 20px;
                }
            }
        }
    }

    .mt-39 {
        margin-top: 39px;
    }
}

/deep/.el-button--small {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    color: white;
    padding: 0;
}

.banner-supervise {
    width: 1500px;
    height: 180px;
    overflow: hidden;

    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

}

.banner-supervise-two {
    width: 600px;
    height: 300px;
    overflow: hidden;

    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
}
</style>
